import './App.css';
import React from 'react';
import { Button, Tag, Card, List, Toast } from 'antd-mobile';
import * as request from './request';
import Toolbar from "./Toolbar";
import { connect } from 'react-redux';
import Header from "./Header";
import moment from 'moment';
import ico_quxian from './static/ico_quxian.svg';
import ico_jiankang from './static/ico_jiankang.svg';
import ico_yimiao from './static/ico_yimiao.svg';
import ico_bichi from './static/ico_bichi.svg';
import ico_setting from './static/ico_setting.svg';
import ico_kecheng from './static/ico_kecheng.svg';
import {
    Player,
    ControlBar,
    PlayToggle, // PlayToggle 播放/暂停按钮 若需禁止加 disabled
    ReplayControl, // 后退按钮
    ForwardControl,  // 前进按钮
    CurrentTimeDisplay,
    TimeDivider,
    PlaybackRateMenuButton,  // 倍速播放选项
    VolumeMenuButton
} from 'video-react';
import "../node_modules/video-react/dist/video-react.css";

const apiURL = "/api/services/app/Edu_Course/Get?id=";
const Item = List.Item;
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
        }
    }
    componentDidMount() {
        this.fetchData();
    }
    componentWillUnmount = () => {
        this.setState = (state, callback) => {
            return;
        };
    }
    fetchData = () => {
        Toast.loading('Loading...', 0);
        var id = this.props.match.params.id;
        if (id) {
            request.get(apiURL + id)
                .then((data) => {
                    this.setState({ data: data.result });
                    Toast.hide();
                })
        }
    }
    goto = (item) => {
        if (item.childid === 0) {

        }
        else {

            this.props.history.push(item.url);
        }
    }
    selectBaby=()=>{}
    render() {
        const { data } = this.state;
        const tags = (items) => {
            if (items) {
                var array = items.split(',');
                var resp = array.map((element, i) => {
                    return (<Tag key={i} selected small style={{ marginRight: 3 }}>{element}</Tag>);
                });
            }
            return resp;
        }
        return (
            <div>
                <Header state={this.props} selectBaby={this.selectBaby} />
                <h2 style={{ textAlign: 'center' }}>{data.title}</h2>
                <Card full style={{ marginBottom: 60 }}>
                    <Card.Header
                        title={tags(data.tags)}
                        extra={<span style={{ fontSize: 11, color: 'gray' }}>{moment(data.apprvTime).format('YYYY-MM-DD')} 发布</span>}
                    />
                    <Card.Body>
                        {
                            data.cType == "video" ? <Player
                                ref={c => { this.player = c; }}
                                poster="https://video-react.js.org/assets/poster.png"
                            >
                                <source
                                    src={data.videoUrl}
                                    type="video/mp4"
                                />
                                <ControlBar autoHide={false} disableDefaultControls={false}>
                                    <ReplayControl seconds={10} order={1.1} />
                                    <ForwardControl seconds={30} order={1.2} />
                                    <PlayToggle />
                                    <CurrentTimeDisplay order={4.1} />
                                    <TimeDivider order={4.2} />
                                    <PlaybackRateMenuButton rates={[5, 2, 1.5, 1, 0.5]} order={7.1} />
                                    <VolumeMenuButton />
                                </ControlBar>
                            </Player> : null
                        }

                        <div dangerouslySetInnerHTML={{ __html: data.contents }} className='myDetail' />
                    </Card.Body>
                    <Card.Footer content={data.subTitle} extra={<div>收藏：{data.collectNum}</div>} />
                </Card>
                <Toolbar history={this.props.history} selectedTab='Home' />
            </div>
        )
    };
}
export default connect(
    state => ({ currentUser: state.setCurrentUser, currentChild: state.setCurrentChild })
)(App)
